<div class="mdl-cell mdl-cell--12-col-desktop mdl-cell--12-col-tablet mdl-cell--4-col-phone">
  <h3>Basic cards</h3>
</div>

<div class="mdl-cell mdl-cell--4-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">
  <base-card>
    <base-card-title>
      <h2 class="mdl-card__title-text">Shanghai</h2>
    </base-card-title>
    <base-card-body>
      <small>City in China</small>

      Shanghai, on China’s central coast, is the country's biggest city and a global financial hub.
      Its heart is the Bund, a famed waterfront promenade lined with colonial-era buildings.
      Across the Huangpu River rises the Pudong district’s futuristic skyline, including
      632m Shanghai Tower and the Oriental Pearl TV Tower, with distinctive pink spheres.
      Sprawling Yu Garden has traditional pavilions, towers and ponds.
      <br><br>
      <b>Weather:</b> 9°C, Wind NE at 11 km/h, 79% Humidity
      <br>
      <b>Local time:</b> Thursday 9:58 PM
      <br>
      <b>Population:</b> 24.15 million (2015)
    </base-card-body>
  </base-card>
</div>

<div class="mdl-cell mdl-cell--4-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">
  <base-card>
    <base-card-title>
      <h2 class="mdl-card__title-text">Moscow</h2>
    </base-card-title>
    <base-card-body expanded>
      <small>Capital of Russia</small>
      Moscow, on the Moskva River in western Russia, is the nation’s cosmopolitan capital.
      In its historic core is the Kremlin, a complex that’s home to the president and tsarist treasures in the Armoury.
      Outside its walls is Red Square, Russia's symbolic center. It's home to Lenin’s Mausoleum,
      the State Historical Museum's comprehensive collection and St. Basil’s Cathedral, known for its colorful,
      onion-shaped domes.
      <br><br>
      <b>Weather:</b> 9°C, Wind W at 26 km/h, 47% Humidity
      <br>
      <b>Local time:</b> Thursday 5:13 PM
      <br>
      <b>Population:</b> 11.92 million (2012)
    </base-card-body>
    <base-card-actions class="mdl-card--border">
      <a
        class="mdl-button button--colored-orange mdl-js-button mdl-js-ripple-effect"
        href="https://www.google.by/maps/place/Moscow,+Russia/@55.7494733,37.35232,10z/data=!3m1!4b1!4m5!3m4!1s0x46b54afc73d4b0c9:0x3d44d6cc5757cf4c!8m2!3d55.755826!4d37.6173"
        target="_blank">
        Show on map
      </a>
    </base-card-actions>
  </base-card>
</div>

<div class="mdl-cell mdl-cell--4-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">
  <base-card>
    <base-card-title>
      <h2 class="mdl-card__title-text">London</h2>
    </base-card-title>
    <base-card-body expanded>
      <small>Capital of England</small>
      London, the capital of England and the United Kingdom, is a 21st-century city with history stretching back to Roman times.
      At its centre stand the imposing Houses of Parliament, the iconic ‘Big Ben’ clock tower and Westminster Abbey,
      site of British monarch coronations. Across the Thames River, the London Eye observation wheel provides panoramic
      views of the South Bank cultural complex, and the entire city.
      <br><br>
      <b>Weather:</b> 11°C, Wind NE at 31 km/h, 57% Humidity
      <br>
      <b>Local time:</b> Thursday 2:22 PM
      <br>
      <b>Population:</b> 8.674 million (2015)
    </base-card-body>
    <base-card-actions>
      <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect button--colored-orange pull-right"
         href="https://www.google.by/maps/place/London,+UK/data=!4m2!3m1!1s0x47d8a00baf21de75:0x52963a5addd52a99?sa=X&ved=0ahUKEwig76SihPfSAhVCCpoKHTuzBDsQ8gEIeTAN"
         target="_blank">
        Show on map
      </a>
    </base-card-actions>
    <base-card-menu>
      <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
        <i class="material-icons">more_vert</i>
      </button>
    </base-card-menu>
  </base-card>
</div>


<div class="mdl-cell mdl-cell--12-col-desktop mdl-cell--12-col-tablet mdl-cell--4-col-phone">
  <h3>Image cards</h3>
</div>

<div class="mdl-cell mdl-cell--4-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">
  <base-card>
    <base-card-title>
      <h2 class="mdl-card__title-text">Istanbul</h2>
    </base-card-title>
    <base-card-body>
      <small>City in Turkey</small>
      Istanbul is a major city in Turkey that straddles Europe and Asia across the Bosphorus Strait.
      Its Old City reflects cultural influences of the many empires that once ruled here.
      In the Sultanahmet district, the open-air, Roman-era Hippodrome was for centuries the site of chariot races,
      and Egyptian obelisks also remain.
      The iconic Byzantine Hagia Sophia features a soaring 6th-century dome and rare Christian mosaics.
      <br><br>
      <b>Weather:</b> 12°C, Wind S at 13 km/h, 71% Humidity
      <br>
      <b>Local time:</b> Friday 4:00 PM
      <br>
      <b>Population:</b> 14.8 million (Dec 31, 2016)
    </base-card-body>
  </base-card>
</div>

<div class="mdl-cell mdl-cell--4-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">
  <base-card>
    <base-card-title>
      <h2 class="mdl-card__title-text">Tokyo</h2>
    </base-card-title>
    <base-card-body expanded>
      <small>Capital of Japan</small>
      Tokyo, officially Tokyo Metropolis, is the capital of Japan and one of its 47 prefectures.
      The Greater Tokyo Area is the most populous metropolitan area in the world.
      It is the seat of the Emperor of Japan and the Japanese government.
      <a class="color-text--light-blue" href="https://en.wikipedia.org/wiki/Tokyo" target="_blank">Wikipedia</a>
      <br><br>
      <b>Weather:</b> 5°C, Wind NW at 26 km/h, 54% Humidity
      <br>
      <b>Local time:</b> Friday 10:04 PM
      <br>
      <b>Population:</b> 13.62 million (Jul 31, 2016)
    </base-card-body>
    <base-card-actions class="mdl-card--border">
      <a class="mdl-button button--colored-light-blue mdl-js-button mdl-js-ripple-effect"
         href="https://www.google.by/maps/place/Tokyo,+Japan/@35.6730185,139.4302008,10z/data=!3m1!4b1!4m5!3m4!1s0x605d1b87f02e57e7:0x2e01618b22571b89!8m2!3d35.6894875!4d139.6917064"
         target="_blank">
        Show on map
      </a>
    </base-card-actions>
  </base-card>
</div>

<div class="mdl-cell mdl-cell--4-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">
  <base-card>
    <base-card-title>
      <h2 class="mdl-card__title-text">São Paulo</h2>
    </base-card-title>
    <base-card-body expanded>
      <small>Municipality in Brazil</small>
      São Paulo, Brazil’s vibrant financial center, is among the world's most populous cities,
      with numerous cultural institutions and a rich architectural tradition.
      Its iconic buildings range from its neo-Gothic cathedral and the 1929 Martinelli skyscraper to modernist
      architect Oscar Niemeyer’s curvy Edifício Copan.
      The colonial-style Pátio do Colégio church marks where Jesuit priests founded the city in 1554.
      <br><br>
      <b>Weather:</b> 24°C, Wind E at 10 km/h, 62% Humidity
      <br>
      <b>Local time:</b> Friday 10:05 AM
      <br>
      <b>Population:</b> 12.04 million (2016)
    </base-card-body>
    <base-card-actions>
      <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect button--colored-light-blue pull-right"
         href="https://www.google.by/maps/place/S%C3%A3o+Paulo,+State+of+S%C3%A3o+Paulo,+Brazil/data=!4m2!3m1!1s0x94ce448183a461d1:0x9ba94b08ff335bae?sa=X&ved=0ahUKEwjQ1pf_g_fSAhVHWSwKHQoNDc0Q8gEIjwEwEQ"
         target="_blank">
        Show on map
      </a>
    </base-card-actions>
    <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
      <i class="material-icons">favorite_border</i>
    </button>
    <base-card-menu>
      <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
        <i class="material-icons">share</i>
      </button>
    </base-card-menu>
  </base-card>
</div>
